<template>
	<view>
		<view class="uni-flex uni-row">
			<button type="default" plain="true" style="flex: 1;color: #AA0000;font-size: 26upx;height:80upx;" @tap="showlist1"
			 v-if="mobile1.length > 3">{{A}}&nbsp;{{mobile1}}</button>
			<button type="default" plain="true" style="flex: 1;color: #00AA00;font-size: 26upx;height:80upx;" @tap="showlist2"
			 v-if="mobile2.length > 3">{{B}}&nbsp;{{mobile2}}</button>
			<button type="default" plain="true" style="flex: 1;color: #0000AA;font-size: 26upx;height:80upx;" @tap="showlist3"
			 v-if="mobile3.length > 3">{{C}}&nbsp;{{mobile3}}</button>
		</view>
		<map :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="pline" :circles="circles">

			<!-- <cover-view class="cover-view">{{msg}}</cover-view> -->
		</map>

         <view class="uni-flex uni-row">
			<button type="primary" style="flex: 1;" @tap="xtbwz" >{{xtbwztitle}}</button>
			<button type="primary" style="flex: 1;" @tap="zhsd" >{{zhsdtitle}}</button>
		</view>
		<view class="uni-flex uni-row">
			<button type="primary" style="flex: 1;" @tap="sendmsg1" v-if="num10 < 1">1点回传</button>
			<button type="primary" style="flex: 1;" @tap="sendmsg2" v-if="num10 < 1">10点回传</button>
			<button type="default" style="flex: 1;" v-if="num10 > 0">{{msg}}</button>
		</view>

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		 @scroll="scroll">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index2) in recordlist" :key="index2"
				 @tap="showonmap" :data-indexid="index2">
					<view class="uni-triplex-row">
						<view class="uni-triplex-left">
							<text class="uni-title uni-ellipsis">[{{item.xt}}]&nbsp;&nbsp;编号:{{item.index}}&nbsp;&nbsp;{{item.create_time}}</text>
							<text class="uni-text">经纬度: &nbsp;{{item.lng}}&nbsp;&nbsp;{{item.lat}}</text>
							<text class="uni-text-small uni-ellipsis">速度:{{item.vel}}km/h&nbsp;方向:{{item.dir}}度&nbsp;电量阶数:{{item.powerlevel}}&nbsp;资讯:{{item.zhixun}}</text>
						</view>
						<view class="uni-triplex-right">
							<text class="uni-h5"></text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>

</template>
<script>
	export default {
		data() {
			return {
				title: 'map',
				username: '',
				password: '',
				A: '*',
				B: '',
				C: '',
				num10: 0,
				msg: '',
				xtbwztitle: '不显示心跳包位置',
				zhsdtitle: '全部回传位置点',
				isxtbwz: 0,
				iszhsd: 0,
				mobile: '',
				mobile1: '',
				mobile2: '',
				mobile3: '',
				index: 0,
				timer: null,
				seconds: 0,
				recordlist: [],
				covers: [],
				covers_r: [],
				circles: [],
				circles1: [],
				circles2: [],
				circles3: [],
				devicelist: [],
				latitude: 39.909,
				longitude: 116.39742,
				scale: 17,
				timerindex: 0,
				pline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
					points: [],
					color: "#FF0000", //线的颜色
					width: 5, //线的宽度
					dottedLine: false, //是否虚线
					arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
				}],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				mobile1Data: {
					hcjg: 30, //回传间隔 秒
					max: 10, //回传次数
					start: 0, //回传开始时间UTC new Date().getTime() 毫秒
					end: 0 // = start+hcjg*max*1000
				},
				mobile2Data: {
					hcjg: 30, //回传间隔 秒
					max: 10, //回传次数
					start: 0, //回传开始时间UTC new Date().getTime() 毫秒
					end: 0
				},
				mobile3Data: {
					hcjg: 30, //回传间隔 秒
					max: 10, //回传次数
					start: 0, //回传开始时间UTC new Date().getTime() 毫秒
					end: 0
				}
			}
		},
		onNavigationBarButtonTap(e) {
			if (this.num10 > 0) {
				uni.showToast({
					title: '回传计数中，改设备不能发命令！',
					icon: 'none',
					mask: true,
					duration: 3000
				});
				return
			}
			uni.navigateTo({
				url: '../command/command?name=' + this.mobile,
			});
		},
		onLoad(e) {
			uni.getStorage({
				key: 'username',
				success: (res) => {
					this.username = res.data;
				},
				fail: () => {

				}
			});
			uni.getStorage({
				key: 'password',
				success: (res) => {
					this.password = res.data;
				},
				fail: () => {
					this.password = "";
				}
			});
			this.$okret = false;
			let _this = this;
			uni.request({
				url: this.url + '/api/feige/login?',
				data: {
					"username": this.username,
					"password": this.password
				},
				success: function(res) {
					_this.mobile1 = res.data.data.mobile1;
					_this.mobile2 = res.data.data.mobile2;
					_this.mobile3 = res.data.data.mobile3;
					_this.mobile = _this.mobile1;
					_this.getcommandlog();
					_this.regetrecord();
				}
			});

			//5 分钟刷一次
			this.timer = setInterval(() => {

				var msg = "";
				var t = 0;
				var now = parseInt(new Date().getTime() / 1000);
				if (_this.index == 0) {
					// console.log("0--- timer1--" + _this.mobile1Data.end + " " + now);
					if (_this.mobile1Data.end > 0 && now < _this.mobile1Data.end) {
						t = parseInt((now - _this.mobile1Data.start) / _this.mobile1Data.hcjg) + 1;
						msg = "多次定位上传中," + _this.mobile1Data.max + "-" + t;
						// console.log("--" + t + "GGG-" + msg);
					}
				} else if (_this.index == 1) {
					if (_this.mobile2Data.end > 0 && now < _this.mobile2Data.end) {
						t = parseInt((now - _this.mobile2Data.start) / _this.mobile2Data.hcjg) + 1;
						msg = "多次定位上传中," + _this.mobile2Data.max + "-" + t;
					}
				} else if (_this.index == 2) {
					if (_this.mobile3Data.end > 0 && now < _this.mobile3Data.end) {
						t = parseInt((now - _this.mobile3Data.start) / _this.mobile3Data.hcjg) + 1;
						msg = "多次定位上传中," + _this.mobile3Data.max + "-" + t;
					}
				}
				_this.num10 = t;

				if (_this.timerindex == 0 || _this.msg != msg) {
					_this.regetrecord();
					// console.log("timer-" + _this.timerindex);
				}
				_this.msg = msg;
				_this.timerindex++;
				if (_this.timerindex > 300) {
					_this.timerindex = 0;
				}

			}, 1000)


		},
		onShow(e) {
			//无论是否有返回值，都需获取最近的指令
			// console.log("mobile1--" + this.mobile1);
			if (this.$okret) {
				this.getcommandlog();
			}
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			showonmap(e) {
				var i = e.currentTarget.dataset.indexid;
				// console.log("AAA-" + i);
				if (this.recordlist[i].dlng < 0.00001 || i >= this.recordlist.length) {
					return;
				}
				var diff = Math.random() / 100000; //
				this.latitude = this.recordlist[i].dlat + diff;
				this.longitude = this.recordlist[i].dlng;

				this.covers.length = 0;
				for (i = 0; i < this.covers_r.length; i++) {
					this.covers.push(this.covers_r[i]);
				}
				var iconPath = '../../static/red.png';
				this.covers.push({
					iconPath: iconPath,
					latitude: this.latitude,
					longitude: this.longitude,
				});

			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			showlist1: function() {
				this.index = 0;
				this.A = '*';
				this.B = '';
				this.C = '';
				this.mobile = this.mobile1;
				this.getcommandlog();
				this.regetrecord();
			},
			showlist2: function() {
				this.A = '';
				this.B = '*';
				this.C = '';
				this.index = 1;
				this.mobile = this.mobile2;
				this.getcommandlog();
				this.regetrecord();
			},
			showlist3: function() {
				this.A = '';
				this.B = '';
				this.C = '*';
				this.index = 2;
				this.mobile = this.mobile3;
				this.getcommandlog();
				this.regetrecord();
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			sendmsg1: function() {
				let _this = this;
				_this.num10 = 0;

				uni.request({
					url: this.url + '/api/feige/sendmsg',
					data: {
						"name": this.mobile,
						"msg": '$G01',
					},
					success: (res) => {
						uni.showToast({
							title: '发送指令成功！',
							icon: 'none',
							mask: true,
							duration: 3000
						});
						this.regetrecord();
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							title: '获取记录失败！' + err,
							icon: 'none',
							mask: true,
							duration: 3000
						});
					},
					complete: () => {

					}
				});
			},
			sendmsg2: function() {
				let _this = this;
				_this.num10 = 0;
				uni.request({
					url: _this.url + '/api/feige/sendmsg',
					data: {
						"name": _this.mobile,
						"msg": '$G98,30',
					},
					success: (res) => {
						uni.showToast({
							title: '发送指令成功！',
							icon: 'none',
							mask: true,
							duration: 3000
						});
						_this.getcommandlog();
					},
					fail: (err) => {
						// console.log(err);
						uni.showToast({
							title: '获取记录失败！' + err,
							icon: 'none',
							mask: true,
							duration: 3000
						});
					},
					complete: () => {

					}
				});
			},
			xtbwz: function() {
	
				if (this.isxtbwz) {
					this.isxtbwz = 0;
					this.xtbwztitle = '不显示心跳包位置';
				} else {
					this.isxtbwz = 1;
					this.xtbwztitle = '显示心跳包位置';
				}
				this.regetrecord();
	
			},
			zhsd: function() {
				if (this.iszhsd) {
					this.iszhsd = 0;
					this.zhsdtitle = '全部回传位置点';
				} else {
					this.iszhsd = 1;
					this.zhsdtitle = '最后10点回传位置点';
				}
				this.regetrecord();
			},
			arraymerg: function(a1, a2, a3) {
				var a = [];
				for (var i = 0; i < a1.length; i++) {
					a.push(a1[i]);
				}
				for (var i = 0; i < a2.length; i++) {
					a.push(a2[i]);
				}
				for (var i = 0; i < a3.length; i++) {
					a.push(a3[i]);
				}
				return a;
			},
			getcommandlog: function() {
				let _this = this;
				_this.mobile1Data.end = 0;
				_this.mobile2Data.end = 0;
				_this.mobile3Data.end = 0;
				if (this.mobile1.length > 1) {
					uni.request({
						url: this.url + '/api/feige/getcommand?',
						data: {
							"mobile": this.mobile1
						},
						success: function(res) {
							// console.log(JSON.stringify(res.data.data));
							_this.mobile1Data.hcjg = parseInt(res.data.data.hcjg);
							_this.mobile1Data.max = parseInt(res.data.data.max);
							_this.mobile1Data.start = parseInt(res.data.data.start);
							if (_this.mobile1Data.start > 0) {
								_this.mobile1Data.end = _this.mobile1Data.start + _this.mobile1Data.hcjg * _this.mobile1Data.max;
							}
						},
						fail: (err) => {
							console.log(err);
						},
						complete: () => {
							// console.log(_this.mobile1Data.end + "--- end1");
						}
					});
				}

				if (this.mobile2.length > 1) {
					uni.request({
						url: this.url + '/api/feige/getcommand?',
						data: {
							"mobile": this.mobile2
						},
						success: function(res) {
							if (res.data.code == 1 && res.data.data) {
								_this.mobile2Data.hcjg = res.data.data.hcjg;
								_this.mobile2Data.max = res.data.data.max;
								_this.mobile2Data.start = res.data.data.start;
								if (_this.mobile2Data.start > 0) {
									_this.mobile2Data.end = _this.mobile2Data.start + _this.mobile2Data.hcjg * _this.mobile2Data.max;
								}
							}

							// console.log(_this.mobile2Data.end + "--- end2");
						}
					});
				}

				if (this.mobile3.length > 1) {
					uni.request({
						url: this.url + '/api/feige/getcommand?',
						data: {
							"mobile": this.mobile3
						},
						success: function(res) {
							if (res.data.code == 1 && res.data.data) {
								_this.mobile3Data.hcjg = res.data.data.hcjg;
								_this.mobile3Data.max = res.data.data.max;
								_this.mobile3Data.start = res.data.data.start;
								if (_this.mobile3Data.start > 0) {
									_this.mobile3Data.end = _this.mobile3Data.start + _this.mobile3Data.hcjg * _this.mobile3Data.max;
								}
							}
							// console.log(_this.mobile3Data.end + "--- end3");
						}
					});
				}


			},
			regetrecord: function() {
				// this.recordlist.splice(0, this.recordlist.length);
				this.recordlist.length = 0;
				if (this.mobile.length < 1) {
					return;
				}

				let _this = this;
				_this.circles.length = 0;
				// console.log("regetrecord---" + _this.mobile1 + " " + _this.mobile);
				if (_this.mobile == _this.mobile1) {
					_this.circles1.length = 0;
				} else if (_this.mobile == _this.mobile2) {
					_this.circles2.length = 0;
				} else if (_this.mobile == _this.mobile3) {
					_this.circles3.length = 0;
				}

				uni.request({
					url: this.url + '/api/feige/getrecords',
					data: {
						"mobile": this.mobile
					},
					success: (res) => {
						_this.recordlist = res.data.data;
						let recordlisttemp = [];
						for (var i = 0; i < _this.recordlist.length; i++) {
							if (_this.recordlist[i].state == "V") {
								continue;
							}
							if (!this.isxtbwz && _this.recordlist[i].isxt == 1) {
								continue;
							}
							recordlisttemp.push(_this.recordlist[i]);
						}
						
						var end = 10;
						if (!this.iszhsd || end > recordlisttemp.length) {
							end = recordlisttemp.length;
						}
						
						var radius0 = 4;
						for (var i = 0; i < end; i++) {
							if (this.iszhsd) {
								radius0 = parseInt(6 - i * 0.3);
								// radius0 = 6 - i * 0.3;
							}
							if (_this.mobile == _this.mobile1) {
								_this.circles1.push({
									latitude: recordlisttemp[i].dlat,
									longitude: recordlisttemp[i].dlng,
									fillColor: "#AA0000",
									radius: radius0,
									strokeWidth: 0
								});
							} else if (_this.mobile == _this.mobile2) {
								_this.circles2.push({
									latitude: recordlisttemp[i].dlat,
									longitude: recordlisttemp[i].dlng,
									fillColor: "#00AA00",
									radius: radius0,
									strokeWidth: 0
								});
							} else if (_this.mobile == _this.mobile3) {
								_this.circles3.push({
									latitude: recordlisttemp[i].dlat,
									longitude: recordlisttemp[i].dlng,
									fillColor: "#0000AA",
									radius: radius0,
									strokeWidth: 0
								});
							}

						}

						_this.circles = _this.arraymerg(_this.circles1, _this.circles2, _this.circles3);
						// console.log("AAA---" + JSON.stringify(_this.circles));
						// console.log("AAA---" + JSON.stringify(this.pline));
						// _this.pline[0].points.length = 0;
						// for (var i = 0; i < _this.recordlist.length; i++) {
						// 	_this.pline[0].points.push({
						// 		latitude: _this.recordlist[i].dlat,
						// 		longitude: _this.recordlist[i].dlng
						// 	});
						// }
						// console.log(JSON.stringify(_this.pline));
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							title: '获取记录失败！' + err,
							icon: 'none',
							mask: true,
							duration: 3000
						});
					},
					complete: () => {

					}
				});

				uni.request({
					url: this.url + '/api/feige/getuserdevice?',
					data: {
						"username": this.username,
						"password": this.password
					},
					success: function(res) {
						_this.covers.length = 0;
						_this.covers_r.length = 0; //设备的最后定位点
						_this.devicelist = res.data.data;
						for (var i = 0; i < _this.devicelist.length; i++) {
							if (_this.devicelist[i].dlng < 0.00001) {
								continue;
							}
							
							var iconPath = '../../static/red.png';
							if (_this.mobile == _this.mobile1) {
								//红
							} else if (_this.mobile == _this.mobile2) {
								//绿
								iconPath = '../../static/green.png';
							} else if (_this.mobile == _this.mobile3) {
								//蓝
								iconPath = '../../static/blue.png';
							} 
						
							if (_this.devicelist[i].isonline == 1) {
						
							}

							if (_this.index == i) {
								_this.latitude = _this.devicelist[i].dlat;
								_this.longitude = _this.devicelist[i].dlng;
								// console.log(_this.longitude + "," + _this.latitude);
							}

							_this.covers.push({
								iconPath: iconPath,
								latitude: _this.devicelist[i].dlat,
								longitude: _this.devicelist[i].dlng,
							});

							_this.covers_r.push({
								iconPath: iconPath,
								latitude: _this.devicelist[i].dlat,
								longitude: _this.devicelist[i].dlng,
							});

						}
					}
				});

			}
		}
	}
</script>
<style>
	map {
		width: 100%;
		height: 800upx;
	}

	.cover-view {
		margin-top: 770upx;
		width: 95%;
		text-align: right;
		color: #AA0000;
	}

	.scroll-Y {
		height: 400upx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>


<!--参考 https://blog.csdn.net/weixin_43968043/article/details/86642657 -->
